<template>
  <div class="Bigcontent">
    <!--    <div class="headTitle" style="display:block;position:relative;height: 70px;font-size: 20px">除湿机作业记录</div>-->
    <el-card>
      <el-row style="display: flex;padding-bottom:15px">
        <el-form ref="form" label-width="120px" class="checkSolution" style="padding-right: 15px;display: flex;flex-direction: row">
          <el-form-item label="当前状态: " size="medium" style="display: inline">
            <el-select
              v-model="filter.id"
              filterable
              placeholder="请选择当前状态"
              :loading="canLoading"
              style="width: 150px;"
            >
              <!--              <el-option label="查询所有" value="all" />-->
              <el-option v-for="(item,index) in statusList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="姓名: " style="display: inline">
            <el-input v-model="filter.name" placeholder="请输入要查询的人姓名" style="width: 200px;" />
            <!--            <el-date-picker-->
            <!--              v-model="filterTime"-->
            <!--              type="datetimerange"-->
            <!--              range-separator="至"-->
            <!--              start-placeholder="开始日期"-->
            <!--              end-placeholder="结束日期"-->
            <!--              style="width:250px"-->
            <!--            />-->
          </el-form-item>
        </el-form>
        <el-col :span="12">
          <el-button type="primary" @click="findDataPage">查询</el-button>
          <!--          <upload-excel :on-success="handleSuccess" :before-upload="beforeUpload" style="display: inline-block" />-->
          <up-load-http />
          <template>
            <download-excel
              class="export-excel-wrapper"
              :data="detailsForm"
              :fields="allData"
              header="护照借出历史数据"
              name="护照借出历史数据.xls"
            >
              <el-button type="success">导出</el-button>
            </download-excel>
          </template>
          <el-button type="danger" @click="delBatch">批量删除</el-button>

        </el-col></el-row>
      <el-table
        id="out-table"
        ref="tableData"
        :data="allDataList"
        border
        stripe
        :header-cell-style="{'background-color':'#f6f6f6'}"
        :cell-style="{padding: '0'}"
        :row-style="{height:'50px'}"
      >
        <el-table-column type="selection" width="40" label="全选" />
        <el-table-column prop="id" label="工号" />
        <el-table-column prop="department" label="所属单位" />
        <el-table-column prop="ownerName" label="姓名" />
        <el-table-column prop="lendDate" label="借出时间" />
        <el-table-column prop="returnDate" label="归还时间" />
        <!--        <el-table-column prop="faultName" label="当前状态" />-->
        <el-table-column prop="phoneNumber" label="手机号" />
        <!--        <el-table-column fixed="right" label="操作" width="175">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-button-->
        <!--              type="primary"-->
        <!--              size="mini"-->
        <!--              title="查看"-->
        <!--              @click="openForm(scope.row)"-->
        <!--            >查看</el-button>-->
        <!--            <el-button-->
        <!--              type="danger"-->
        <!--              size="mini"-->
        <!--              title="删除"-->
        <!--              @click="delRow(scope.row)"-->
        <!--            >删除</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <div class="block" style="padding:10px 0;">
        <el-pagination
          ref="pagebtn"
          layout="total,prev,pager,next"
          prev-text="上一页"
          next-text="下一页"
          :hide-on-single-page="false"
          :page-size="pageSize"
          :total="pageTotal"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
// import { AddDataClearWet,DelDataClearWet,FindDataClearWetById,GetDataClearWetPage,UpdateDataClearWet} from '../../../api/house'
// import { DelDataClearWet, GetDataClearWetPage } from '@/api/house'
// import moment from 'moment'
// import { ClearData } from '@/api/data'
import UploadExcel from '../../components/UploadExcel/index'
import upLoadHttp from '@/components/upLoadHttp'
import { allData } from '@/api/data'
export default {
  name: 'Index',
  components: {
    // 2.注册组件
    UploadExcel,
    upLoadHttp
  },
  data() {
    return {
      // clearData: ClearData,
      allData: allData,
      dialogFormVisible: false,
      uploadImageVisible: false,
      canLoading: false,
      storeLoading: true,
      delFlag: false,
      value1: '',
      type: '',
      uploadUrl: '',
      filterFood: {
        storeCanId: '',
        storeId: ''
      },
      canList: [],
      storeList: [],
      tableData: [],
      fileList: [],
      categoryList: [],
      pageSize: 10,
      pageTotal: 0,
      currentPage: 1,
      allDataList: [
        {
          'id': 1,
          'department': 1,
          'ownerName': 1,
          'status': 1,
          'lendDate': 1,
          'returnDate': 1,
          'phoneNumber': 1
        },
        {
          'id': 1,
          'department': 1,
          'ownerName': 1,
          'status': 1,
          'lendDate': 1,
          'returnDate': 1,
          'phoneNumber': 1
        },
        {
          'id': 1,
          'department': 1,
          'ownerName': 1,
          'status': 1,
          'lendDate': 1,
          'returnDate': 1,
          'phoneNumber': 1
        }
      ],
      dataForm: {
        dehumidifierDevice: {
          deviceName: '',
          protocolId: ''
        }

      },
      filter: {
        id: 1
      },
      filterTime: [],
      statusList: [
        {
          'id': 1,
          'name': '已申请'
        },
        {
          'id': 2,
          'name': '已借出'
        },
        {
          'id': 3,
          'name': '已归还'
        }
      ],
      detailsForm: [],
      beginAndEnd: []
    }
  },
  mounted() {
    // this.initstatusList()
    this.initAllData()
    // this.findDataPage()
  },
  methods: {
    handleDate(e) {
      this.$nextTick(() => {
        if (e == null) {
          // this.queryForm.tcStart = ''
          // this.queryForm.tcEnd = ''
          this.filterTime = []
        } else {
          this.$set(this, 'beginAndEnd', [e[0], e[1]])
          this.filterTime[0] = this.formDate(this.beginAndEnd[0])
          this.filterTime[1] = this.formDate(this.beginAndEnd[1])
        }
      })
    },
    findDataPage() {
      this.$api.get('/find/nas?name=' + this.filter.name + '&status=' + this.filter.id + '&pageSize=' + this.pageSize + '&pageNum=' + this.currentPage).then(res => {
        this.allDataList = res
      })
      this.initAllData()
    },
    initAllData() {
      this.detailsForm = []
      let url = ''
      // 已申请
      if (this.filter.id == 1) {
        url = '/get/apply'
      }
      // 已借出
      if (this.filter.id == 2) {
        url = '/get/loan'
      }
      // 已归还
      if (this.filter.id == 3) {
        url = '/get/return'
      }
      // let trueUrl =
      this.$api.get(url + '?pageNum=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
        this.allDataList = res
      })
    },
    changeFilter() {
      console.log(this.filterTime !== null)
      if (this.filterTime != null) {
        if (this.filterTime.length !== 0) {
          this.filter.startTime = moment(this.filterTime[0]).format('YYYY-MM-DD HH:mm:ss')
          this.filter.endTime = moment(this.filterTime[1]).format('YYYY-MM-DD HH:mm:ss')
        } else {
          this.filter.startTime = ''
          this.filter.endTime = ''
        }
      } else {
        this.filter.startTime = ''
        this.filter.endTime = ''
      }
    },
    initstatusList() {
      this.$api.get('/dehumidifier_device/list').then(res => {
        this.statusList = res.data
      })
    },
    openForm(item) {
      console.log(item)
      this.dataForm = item
      this.openDialog()
    },
    openDialog() {
      this.dialogFormVisible = !this.dialogFormVisible
    },
    delBatch() {
      console.log(this.$refs.tableData.selection)
      this.delBase(this.$refs.tableData.selection)
    },
    delBase(rows) {
      if (rows.length === 0) {
        this.$message.warning('请选择后再删除！')
        return
      }

      const delData = []
      for (const row of rows) {
        delData.push(row.id)
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.post('/delete/apply', delData).then(res => {
          if (res) {
            this.$message.success('删除成功')
            const totalPage = Math.ceil((this.pageTotal - delData.length) / this.pageSize)
            const currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
            this.currentPage = currentPage < 1 ? 1 : currentPage
            this.initAllData()
          } else {
            this.$message.error('删除失败')
          }
        })
      })
    },
    delRow(row) {
      const list = []
      list.push(row.id)
      console.log()
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DelDataClearWet(list).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentPage = val
    },

    // 表单导入
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ header, results }) {
      console.log(header, results)
      this.tableData = results
      this.tableHeader = header
    }
  }
}
</script>

<style lang="scss">
.el-card.is-always-shadow{
  box-shadow:none !important;
}
</style>
<style scoped lang="scss">
.export-excel-wrapper{
  display: inline-block;
  margin-left: 10px;
}
.Bigcontent{
  width: 100%;
  background-color: #F5F5F5;
  .headTitle{
    height: 70px;
    font-size: 14px;
    color:#000000;
    padding-top: 23px;
    padding-left: 28px;
    margin-bottom: 16px;
    box-shadow: 2px 2px 1px #e0e0e0;
    background-color: #ffffff;
  }
}
.collapse-container {
  margin-left: 15px;
  .search {
    color: #3a8ee6;
    font-size: 15px;
    font-weight: 600;
    margin-left: 10px;
  }

  .el-collapse-item__header {
    height: 35px;
    line-height: 35px;
  }

  .el-collapse-item__content {
    padding-bottom: 0;
  }
}
</style>
<style lang="scss">
.checkSolution{
  .el-form-item__label{
    width: 73px !important;
    text-align: right;
  }
  .el-form-item__content{
    margin-left: 73px !important;
    margin-right:23px !important;
  }
}

</style>
<style lang="scss" scoped>
.export-excel-wrapper{
  display: inline-block;
  margin-right: 16px;
  margin-left: 0 !important;
}
</style>
